<template>
    <div class="my_content">
        <TitleBar>基础数据</TitleBar>
        <div class="top_box">
            <div class="bar_left">
                <!-- <div id="echarts_1" style="width:100%;height: 100%;"></div> -->
                <div class="bar_box bar_box_1">
                    <el-progress type="circle" :percentage="basicData['personnelOnlineProporte']" :color="bar_color" :stroke-width="strokeWidth"></el-progress>
                    <div class="bar_circle">
                        <span class="bar_number f_20_light">{{ basicData['personnelOnlineProporte'] }}</span>
                        <span class="bar_precentage f_14">%</span>
                    </div>
                </div>
                <div class="bar_text bar_text_1">
                    <div class="bar_text_top f_14_tm">工作人员在线人数</div>
                    <div class="bar_text_bottom">
                        <div class="number f_24_light">{{ basicData['personnelOnlineCount'] }}</div>
                        <div class="person f_12">人</div>
                    </div>
                </div>
            <!-- </div>
            <div class="bar_right"> -->
                <div class="bar_box bar_box_2">
                    <el-progress type="circle" :percentage="basicData['ownerAppltProporte']" :color="bar_color" :stroke-width="strokeWidth"></el-progress>
                    <div class="bar_circle">
                        <span class="bar_number f_20_light">{{ basicData['ownerAppltProporte'] }}</span>
                        <span class="bar_precentage f_14">%</span>
                    </div>
                </div>
                <div class="bar_text bar_text_2">
                    <div class="bar_text_top f_14_tm">业主总数</div>
                    <div class="bar_text_bottom">
                        <div class="number f_24_light">{{ basicData['owner'] }}</div>
                        <div class="person f_12">人</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_box">
            <div class="bottom_box_item bottom_box_item_1">
                <div class="item_title f_12_light">工作人员总数(人)</div>
                <div class="item_text f_24_light">{{ basicData['personnelCount'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_2">
                <div class="item_title f_12_light">住户总数(人)</div>
                <div class="item_text f_24_light">{{ basicData['resident'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_3">
                <div class="item_title f_12_light">房屋总面积(㎡)</div>
                <div class="item_text f_24_light">{{ basicData['area'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_4">
                <div class="item_title f_12_light">楼栋总数(栋)</div>
                <div class="item_text f_24_light">{{ basicData['building'] }}</div>
            </div>
            <div class="bottom_box_item bottom_box_item_5">
                <div class="item_title f_12_light">房间总数(间)</div>
                <div class="item_text f_24_light">{{ basicData['room'] }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'
import { getBasicData } from "src/api/largeDataScreen";

export default defineComponent({
    components: { TitleBar },
    inject: ['villageId'],
    data() {
        return {
            bar_color: '#AEE4F8',
            // bar_color: 'conic-gradient(from 0deg at 50% 50%, #AEE4F8 0deg, #0B64C3 360deg)',
            strokeWidth: 7,
            basicData: {
                personnelOnlineProporte: 0,  // 工作人员在线人数占比
                personnelOnlineCount: 0,     // 工作人员在线人数
                ownerAppltProporte: 0,       // 业主是否注册小程序占比
                owner: 0,                    // 业主数量
                personnelCount: 0,           // 工作人员总数
                resident: 0,                 // 住户数量
                area: 0,                     // 房屋总面积
                building: 0,                 // 楼栋总数
                room: 0,                     // 房间数量
            },
            timer: null
        }
    },
    mounted() {
        // console.log('基础数据id---->>>', this.villageId)
        this.setIntervalTotalFn()
    },
    destroyed(){
        clearInterval(this.timer);
        this.timer = null;
    },
    methods:{
        setIntervalTotalFn(){
            // 在新增定时器之前 要先清除一下
            this.timer = null;
            const villageId = this.villageId
            if(villageId){
                this.getBasicData(villageId);
                this.timer = setInterval(() => {
                    this.getBasicData(villageId);
                }, 20000);
            }
        },
        getBasicData(villageId){
            getBasicData({villageId: villageId}).then(res=>{
                if(res.success == true){
                    this.basicData = {
                        // personnelOnlineProporte: (res.data.personnelOnlineProporte == 100 ? 100 : Number(res.data.personnelOnlineProporte.substr(0, res.data.personnelOnlineProporte.length-1))) || 0,
                        personnelOnlineProporte: (res.data.personnelOnlineProporte == 100 ? 100 : Number(res.data.personnelOnlineProporte)) || 0,
                        personnelOnlineCount: res.data.personnelOnlineCount || 0,
                        ownerAppltProporte: (res.data.ownerAppltProporte == 100 ? 100 : Number(res.data.ownerAppltProporte)) || 0,
                        owner: res.data.owner || 0,
                        personnelCount: res.data.personnelCount || 0,
                        resident: res.data.resident || 0,
                        area: res.data.area || 0,
                        building: res.data.building || 0,
                        room: res.data.room || 0,
                    }
                }
            })
        },
    }
})

</script>

<style scoped lang="scss">
.my_content{
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    color: #E0F7FF;
    .top_box{
        margin-top: 10px;
        height: 30%;
        display: flex;
        // color: #FBE5BB;
        .bar_left, .bar_right{
            height: 100%;
            flex: 1.5;
            display: flex;
            .bar_box{
                flex: 1;
                position: relative;
                display: flex;
                // justify-content: flex-end;
                justify-content: center;
                align-items: center;
                .bar_circle{
                    position: absolute;
                    right: 50%;
                    top: 50%;
                    transform: translate(50%, -50%);
                    width:73%;
                    text-align: center;

                    .bar_number{
                        text-align: right;
                    }
                    .bar_precentage{
                        // margin-left: -3px;
                    }
                }
            }
            .bar_text{
                flex: 1;
                display: flex;
                flex-direction: column;
                // margin-left: 4px;
                transform: translateX(-10px);
                .bar_text_top{
                    flex: 1;
                    display: flex;
                    align-items: flex-end;
                }
                .bar_text_bottom{
                    flex: 1.4;
                    display: flex;
                    align-items: center;
                    .number{
                    }
                    .person{
                        margin-left: 8px;
                        margin-top: 9px;
                    }
                }
            }
            .bar_text_1{
                background: url("./assets/basic_bg_1.png") center/110% 70% no-repeat;
            }
            .bar_text_2{
                background: url("./assets/basic_bg_2.png") center/110% 70% no-repeat;
            }
        }
    }
    .bottom_box{
        width: 100%;
        height: 55%;
        // background: url("@/images/uiImages/largeData/top_left_square.png") bottom/100% 50% no-repeat;
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        // border: 1px solid #ccc;
        // box-sizing: border-box;
        .bottom_box_item{
            height: 100%;
            flex: 1;
            // border: 1px solid #ccc;
            // box-sizing: border-box;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .item_title{
                flex: 1.2;
                display: flex;
                align-items: flex-end;
            }
            .item_text{
                flex: 1;
            }
        }
        .bottom_box_item_1{
            background: url("./assets/top_left_person.png") center 10px/94% 110% no-repeat;
        }
        .bottom_box_item_2{
            background: url("./assets/top_left_household.png") center 10px/94% 110% no-repeat;
        }
        .bottom_box_item_3{
            background: url("./assets/top_left_house.png") center 10px/94% 110% no-repeat;
        }
        .bottom_box_item_4{
            background: url("./assets/top_left_building.png") center 10px/94% 110% no-repeat;
        }
        .bottom_box_item_5{
            background: url("./assets/top_left_room.png") center 10px/94% 110% no-repeat;
        }
    }
    .f_14{
        font-size: 14px !important;
        color: rgba(224, 247, 255, 0.8) !important;
        color: #E1F7FF !important;
    }
    .f_14_tm{
        font-size: 14px !important;
        color: #E1F7FF !important;
        color: rgba(224, 247, 255, 0.8) !important;
    }
    .f_12{
        font-size: 12px !important;
        color: #E1F7FF !important;
    }
    .f_12_light{
        font-size: 12px !important;
        color: #E1F7FF !important;
        color: rgba(225, 247, 255, 0.8) !important;
    }
    .f_20_light{
        font-size: 20px !important;
        color: #E1F7FF !important;
        font-weight: 600 !important;
        text-shadow: 0px 0px 6px rgba(203, 241, 255, 0.4) !important;
    }
    .f_24_light{
        font-size: 24px !important;
        color: #E1F7FF !important;
        font-weight: 600 !important;
        text-shadow: 0px 0px 6px rgba(203, 241, 255, 0.4) !important;
    }
}
:deep .top_box{
    .bar_box_1{
        .el-progress{
            background: url("./assets/basic_bg_circle_1.png") center/90% 90% no-repeat;
        }
    }
    .bar_box_2{
        .el-progress{   
            background: url("./assets/basic_bg_circle_2.png") center/90% 90% no-repeat;
        }
    }
    .el-progress{
        width: 73%;
        height: 91%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: url("./assets/basic_bg_circle_1.png") center/90% 90% no-repeat;

        .el-progress-circle{
            width: 90% !important;
            height: 90% !important;
            display: flex;
            align-items: center;
            .el-progress-circle__track{
                // stroke: #121A36;
                stroke: #02050e;
            }
        }
        .el-progress__text{
            font-weight: 600;
            display: none;
        }
    }
}  
</style>